<template>
  <vue-draggable-resizable class="user-search" :w="550" :h="400" :z="2001">
    <el-card
      class="user-search-card"
      shadow="always"
      :header-style="{padding: '10px'}"
      :body-style="{padding: '20px 10px'}"
    >
      <div slot="header" class="card-header">
        <span>高级搜索</span>
        <div style="float:right; padding:3px 0">
          <el-button
            v-if="bodyVisible"
            style="padding:0"
            type="text"
            @click="toggleBody()"
            icon="el-icon-upload2"
          >折叠</el-button>

          <el-button
            v-else
            style="padding:0"
            type="text"
            @click="toggleBody()"
            icon="el-icon-download"
          >展开</el-button>

          <el-button style="padding:0" type="text" @click="onClose()">关闭搜索</el-button>
        </div>
      </div>

      <div class="search-body">
        <div v-show="bodyVisible">
          <el-form :model="searchForm" ref="searchForm" label-width="70px">
            <el-row>
              <el-col :span="11">
                <el-form-item label="姓名" prop="realname">
                  <el-input v-model="searchForm.realname" placeholder="名称" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="doSearch()">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
  </vue-draggable-resizable>
</template>

<script>
  import VueDraggableResizable from 'vue-draggable-resizable'
  export default {
    name: 'userSearch',
    components: {
      VueDraggableResizable
    },
    data() {
      return {
        visible: false,
        bodyVisible: true,
        searchForm: {
          realname: '',
          deptId: null,
          deptIds: [],
          gender: null,
          craftName: '',
          professionalTitle: '',
          politicCountenance: '',
          education: '',
          identityCard: '',
          mobile: '',
          age: null,
          duty: '',
          jobNumber: ''
        }
      }
    },
    methods: {
      toggleBody() {
        this.bodyVisible = !this.bodyVisible
      },
      async doSearch() {
        this.$emit('onSearch', this.searchForm)
      },
      onClose() {
        this.$emit('onClose')
      }
    },
    watch: {
      'searchForm.deptIds'(val) {
        if (val && val.length > 0) {
          this.searchForm.deptId = val[val.length - 1]
        } else {
          this.searchForm.deptId = null
        }
      }
    },
    computed: {
      formProps() {
        return {
          deptTree: this.$store.getters['user/deptTree'],
          professionalTitleList: this.$store.getters['user/professionalTitleList'],
          educationList: this.$store.getters['user/educationList'],
          dutyList: this.$store.getters['user/dutyList'],
          politicCountenanceList: this.$store.getters['user/politicCountenanceList'],
          craftList: this.$store.getters['user/craftList']
        }
      }
    },
    created() {
      this.$store.dispatch('user/loadCraftList')
    }
  }
</script>

<style scoped>
  .user-search{
    position: absolute;
    border: none;
  }
  .user-search > .user-search-card > .el-card__header > .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
